const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "bundle.[hash:4].js"
    },
    mode: "development",
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000,
        open: true
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        },
        extensions: ['.js', '.vue']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader"
                }]
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                use: [{
                    loader: "vue-loader"
                }]
            }
            , {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [{
                    loader: "vue-style-loader"
                }, {
                    loader: "css-loader"
                }]
            },
              {
                  test: /\.scss$/,
                  use: ['css-loader', 'sass-loader']
              },{
                  test: /\.css$/,
                  use: ['style-loader','css-loader']
              },
        ]
    },
    plugins:
        [
            new HtmlWebpackPlugin({
                template: "./index.html"
            }),
            new VueLoaderPlugin(),
            new CleanWebpackPlugin()
        ]
};
